﻿iec.sp.ui.columnOrdering = function ()
{
    this._moveColumnLink = '<div id="Move" > > </div>';
    this._removeColumnLink = '<div id="Remove" > X </div>';
}

iec.sp.ui.columnOrdering.prototype =
{
    initialize: function ()
    {
        this._initialFormatting();

        var listCollection = $("#listColumns li:not(.ui-state-disabled)");

        $.each(listCollection, function (index, val)
        {
            var moveColumnLink = $(columnOrdering._moveColumnLink);
            $(listCollection[index]).append(moveColumnLink);
            moveColumnLink.bind('click', { self: this }, self.columnOrdering._addviewColumns);
        });

        $("#listColumns, #viewColumns").sortable({
            placeholder: "ui-state-highlight",
            connectWith: ".SortColumns",
            items: "li:not(.ui-state-disabled)",
            helper: 'clone',
            appendTo: 'body',
            zIndex: 10000,
            start: function (event, ui) { $(ui.helper).addClass("ui-draggable-helper"); }
        });

        $("#listColumns").disableSelection();

        $("#viewColumns").bind("sortreceive", function (event, ui)
        {
            $('#' + ui.item[0].id + ' div').remove();

            var removeColumnLink = $(columnOrdering._removeColumnLink);
            ui.item.append(removeColumnLink);

            // remove columns from the view column collection
            removeColumnLink.bind('click', { self: this }, self.columnOrdering._removeviewColumns);

            self.columnOrdering._addOrderNumber();
            self.columnOrdering._reorderViewColumnGuids();
        });

        $("#listColumns").bind("sortreceive", function (event, ui)
        {
            $('#' + ui.item[0].id + ' div').remove();

            $('#' + ui.item[0].id + ' span.OrderNumber').remove();

            var moveColumnLink = $(columnOrdering._moveColumnLink);
            ui.item.append(moveColumnLink);
            moveColumnLink.bind('click', { self: this }, self.columnOrdering._addviewColumns);

            self.columnOrdering._addOrderNumber();
            self.columnOrdering._reorderViewColumnGuids();
        });

        $("#viewColumns").bind("sortupdate", function (event, ui)
        {
            self.columnOrdering._addOrderNumber();
            self.columnOrdering._reorderViewColumnGuids();
        });

        $("#viewColumns").bind("sortremove", function (event, ui)
        {
            self.columnOrdering._addOrderNumber();
            self.columnOrdering._reorderViewColumnGuids();
        });

    },

    dispose: function ()
    {

    },

    _attachEventHandlers: function ()
    {

    },

    _detachEventHandlers: function ()
    {

    },

    _initialFormatting: function ()
    {

        this._addOrderNumber();
        this._reorderViewColumnGuids();

        var viewColumnCollection = $("#viewColumns li");

        for (i = 0; i < viewColumnCollection.length; i++)
        {
            var removeColumnLink = $(columnOrdering._removeColumnLink);
            $("#" + viewColumnCollection[i].id).append(removeColumnLink);
            removeColumnLink.bind('click', { self: this }, this._removeviewColumns);
        }
    },

    _removeviewColumns: function (e)
    {
        var self = e.data.self;

        var parent = (this.parentNode);
        $(this).remove();

        $("#" + parent.id + " span.OrderNumber").remove();

        $(parent).remove();
        $("#viewColumns").sortable('refresh');

        var moveColumnLink = $(columnOrdering._moveColumnLink);
        $(parent).append(moveColumnLink);
        moveColumnLink.bind('click', { self: this }, columnOrdering._addviewColumns);

        $("#listColumns").append(parent);

        columnOrdering._addOrderNumber();
        columnOrdering._reorderViewColumnGuids();
    },

    _addviewColumns: function (e)
    {
        var self = e.data.self;

        var parent = (this.parentNode);
        $(this).remove();

        var removeColumnLink = $(columnOrdering._removeColumnLink);
        $(parent).append(removeColumnLink);
        removeColumnLink.bind('click', { self: this }, columnOrdering._removeviewColumns);

        $("#viewColumns").append(parent);

        columnOrdering._addOrderNumber();
        columnOrdering._reorderViewColumnGuids();
    },

    _addOrderNumber: function ()
    {

        var viewColumnCollection = $("#viewColumns li");
        var orderNumbers = new Array();

        for (i = 0; i < viewColumnCollection.length; i++)
        {

            $("#" + viewColumnCollection[i].id + " span.OrderNumber").remove();
            $("#" + viewColumnCollection[i].id).append(' <span class="OrderNumber"> (' + (i + 1) + ') </span>')
        }
    },

    _reorderViewColumnGuids: function ()
    {
        var hiddenFieldID = $("#viewColumns").parent().children()[1].id;
        var hiddenField = $("#" + hiddenFieldID)[0];
        var viewColumnCollection = $("#viewColumns li");
        var idText = "";

        for (i = 0; i < viewColumnCollection.length; i++)
        {
            idText += viewColumnCollection[i].id;
            idText += "#";
        }

        hiddenField.value = idText;
    }
}

/*

$(function ()
{

    initialFormatting();

    var listCollection = $("#listColumns li:not(.ui-state-disabled)");

    $.each(listCollection, function (index, val)
    {
        var moveColumnLink = $('<a id="Move" href=\"#\"> > </a>');
        $(listCollection[index]).append(moveColumnLink);
        moveColumnLink.click(addviewColumns);
    });

    $("#listColumns, #viewColumns").sortable({
        placeholder: "ui-state-highlight",
        connectWith: ".SortColumns",
        items: "li:not(.ui-state-disabled)"
    });

    $("#listColumns").disableSelection();

    $("#viewColumns").bind("sortreceive", function (event, ui)
    {
        $('#' + ui.item[0].id + ' a').remove();

        var removeColumnLink = $('<a id="Remove" href=\"#\"> X </a>');
        ui.item.append(removeColumnLink);

        // remove columns from the view column collection
        removeColumnLink.click(removeviewColumns);

        addOrderNumber();
        reorderViewColumnGuids();
    });

    $("#listColumns").bind("sortreceive", function (event, ui)
    {
        $('#' + ui.item[0].id + ' a').remove();

        $('#' + ui.item[0].id + ' span').remove();

        var moveColumnLink = $('<a id="Move" href=\"#\"> > </a>');
        ui.item.append(moveColumnLink);
        moveColumnLink.click(addviewColumns);

        addOrderNumber();
        reorderViewColumnGuids();
    });

    $("#viewColumns").bind("sortupdate", function (event, ui)
    {
        addOrderNumber();
        reorderViewColumnGuids();
    });

    $("#viewColumns").bind("sortremove", function (event, ui)
    {
        addOrderNumber();
        reorderViewColumnGuids();
    });

    function removeviewColumns()
    {
        var parent = (this.parentNode);
        $(this).remove();

        $("#" + parent.id + " span.orderNumber").remove();

        $(parent).remove();
        $("#viewColumns").sortable('refresh');

        var moveColumnLink = $('<a id="Move" href=\"#\"> > </a>');
        $(parent).append(moveColumnLink);
        moveColumnLink.click(addviewColumns);

        $("#listColumns").append(parent);

        addOrderNumber();
        reorderViewColumnGuids();
    }

    function addviewColumns()
    {
        var parent = (this.parentNode);
        $(this).remove();

        var removeColumnLink = $('<a id="Remove" href=\"#\"> X </a>');
        $(parent).append(removeColumnLink);
        removeColumnLink.click(removeviewColumns);

        $("#viewColumns").append(parent);

        addOrderNumber();
        reorderViewColumnGuids();
    }

    function addOrderNumber()
    {

        var viewColumnCollection = $("#viewColumns li");
        var orderNumbers = new Array();

        for (i = 0; i < viewColumnCollection.length; i++)
        {

            $("#" + viewColumnCollection[i].id + " span.orderNumber").remove();
            $("#" + viewColumnCollection[i].id).append(' <span class="orderNumber"> (' + (i + 1) + ')</span>')
        }
    }

    function initialFormatting()
    {

        addOrderNumber();
        reorderViewColumnGuids();

        var viewColumnCollection = $("#viewColumns li");

        for (i = 0; i < viewColumnCollection.length; i++)
        {

            var removeColumnLink = $('<a id="Remove" href=\"#\"> X </a>');
            $("#" + viewColumnCollection[i].id).append(removeColumnLink);
            removeColumnLink.click(removeviewColumns);
        }
    }
    
    function reorderViewColumnGuids()
    {
        var hiddenFieldID = $("#viewColumns").parent().children()[1].id;
        var hiddenField = $("#" + hiddenFieldID)[0];
        var viewColumnCollection = $("#viewColumns li");
        var idText = "";

        for (i = 0; i < viewColumnCollection.length; i++)
        {
            idText += viewColumnCollection[i].id;
            idText += "#";
        }

        hiddenField.value = idText;
    }

});

*/